<template>
  <ElDropdown
    @command="useSystemSettings.handleLanguageChange"
    trigger="click"
  >
    <span style="cursor: pointer">
      <ElText type="primary">{{ $t('localeSwitcher.targetLanguage') }}</ElText>
      <ElIcon class="el-icon--right"><IconEpArrowDown /> </ElIcon>
    </span>

    <template #dropdown>
      <ElDropdownMenu>
        <ElDropdownItem command="zh-CN">
          <span :class="{ active: currentLocale === 'zh-CN' }">简体中文</span>
        </ElDropdownItem>
        <ElDropdownItem command="en-US">
          <span :class="{ active: currentLocale === 'en-US' }">English</span>
        </ElDropdownItem>
      </ElDropdownMenu>
    </template>
  </ElDropdown>
</template>

<script setup lang="ts">
  import { systemSettings } from '@/stores'

  const useSystemSettings = systemSettings()

  const { currentLocale } = storeToRefs(useSystemSettings)
</script>

<style scoped>
  .active {
    color: var(--el-color-primary);
    font-weight: bold;
  }
</style>
